import { View, Image, Text } from "@tarojs/components";

import "./index.scss";
import { useState } from "react";
import { useDidShow, useLoad } from "@tarojs/taro";
import apiRequest from "@/service/apiRequest";
import { useUserInfo } from "@/hooks/useUserInfo";
import Taro from "@tarojs/taro";

function PetProfileList() {
    const { userInfo, setUserInfoFn } = useUserInfo();
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(false);

    const handleToEditPage = (id?:number) => {
        let url = '/petProfile/pages/edit/index';
        if (id !== undefined) {
            url = `${url}?id=${id}`;
        }
        Taro.navigateTo({
            url
        })
    }

    const handlePreviewImage = (icon) => {
        if (!icon) return;
        Taro.previewMedia({
            sources: [{url: icon}]
        })
    }

    const requestDeletePet = async (id) => {
		let res = await apiRequest.get(`/api/pets/remove/${id}`);
		return res;
	}

    const handleDeletePet = async (item: any) => {
        if (!item) return;
        Taro.showModal({
			title: '删除宠物',
			content: `确定要删除${item.petName}的档案吗？`,
			success: async (res) => {
				if (res.confirm) {
					let result = await requestDeletePet(item.id);
					if (result) {
						requestPetList();
					}
					
				}
			}
		});
    }

    const listRender = list.length ? list.map((item: any, index) => (
        <View key={index} className="flex-b-c pet-profile-item">
            <View className="flex-a-c left">
                <Image className="avatar" src={item.petAvatarIcon} mode="aspectFill" webp onClick={() => handlePreviewImage(item.petAvatarIcon)} />
                <View>
                    <View className="pet-name">
                        <Text>{ item.petName }</Text>
                        <Text className="age-t">{ item.petAge }岁</Text>
                    </View>
                    <View>
                        <Text className="label">品种:</Text>
                        <Text>{ item.petType }</Text>
                    </View>
                    <View>
                        <Text className="label">性别:</Text>
                        <Text>{ item.petGender }</Text>
                    </View>
                </View>
            </View>
            <View className="right">
                <Text className="edit-t" onClick={() => handleToEditPage(item.id)}>编辑</Text>
                <Text className="edit-t" onClick={() => handleDeletePet(item)}>删除</Text>
            </View>
        </View>
    )) : (
        <View className="empty-box flex-c-c-c">
            <View className="empty-tip">还没有宠物哦～</View>
            <View className="add-pet-btn" onClick={() => handleToEditPage()}>添加宠物</View>
        </View>
    );

    const requestPetList = async () => {
        if (!userInfo || !userInfo.userId) {
            setUserInfoFn(requestPetList);
            return
        }
        setLoading(true);
        let res = await apiRequest.get(`/api/pets/list/${userInfo.userId}`);
        setLoading(false);
        if (res) {
            setList(res);
        }
    }

    useDidShow(() => {
        requestPetList();
    })
    return (
        <View>
            { 
                loading ? (
                    <View className="empty-box flex-c-c-c">
                        <View className="empty-tip">加载中...</View>
                    </View>
                ) : listRender 
            }
        </View>
    )
}

export default PetProfileList;